<template>
    <div>
        <div id="bottomRightChart" style="width:11.25rem;height:6rem;"></div>
    </div>
</template>

<script>
    import echartMixins from "@/utils/resizeMixins";

    export default {
        props: {
            chartData: {
                type: Object,
                required: true
            }
        },
        data() {
            return {
                chart: null
            };
        },
        watch: {
            chartData: {
                deep: true,
                handler() {
                    this.draw();
                }
            }
        },
        mounted() {
            this.draw();
        },
        mixins: [echartMixins],
        methods: {

            draw() {
                // 基于准备好的dom，初始化echarts实例
                this.chart = this.$echarts.init(document.getElementById("bottomRightChart"));

                let option = {
                    title: {
                        text: "",

                        textStyle: {
                            color: "#B4B4B4",
                            fontSize: 16,
                            fontWeight: "normal"
                        }
                    },
                    tooltip: {
                        trigger: "axis",
                        backgroundColor: "rgba(255,255,255,0.1)",
                        axisPointer: {
                            type: "shadow",
                            label: {
                                show: true,
                                backgroundColor: "#7B7DDC"
                            }
                        }
                    },
                    legend: {
                        textStyle: {
                            color: "#B4B4B4"
                        },
                        top: "0%"
                    },
                    grid: {
                        x: "8%",
                        width: "85%",
                        y: "3%",
                        top: "10%"
                    },
                    xAxis: {
                        type: 'category',
                        data: this.chartData.xaxis,
                        axisLine: {
                            lineStyle: {
                                color: "#B4B4B4"
                            }
                        }
                    },
                    yAxis: {
                        splitLine: {
                            show: true,
                            lineStyle: {
                                width: 0.5,
                                type: 'dashed'
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#B4B4B4"
                            }
                        },

                        axisLabel: {
                            formatter: "{value} "
                        },
                        type: 'value'
                    },
                    series: [{
                        data: this.chartData.yaxis,
                        type: 'line',
                        smooth: true,
                        itemStyle: {
                            color: "rgba(87, 213, 227, 1)"
                        },
                        lineStyle: {
                            width: 3
                        },
                        areaStyle: {
                            color: "rgba(14, 203, 241, 1)",
                            opacity: 0.1
                        },
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }]

                }

                this.chart.setOption(option);
            }
        }
    };
</script>

<style lang="scss" scoped>
</style>